<template> <div class="page-container">
  <div class="common-content">
  <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
   <div class="search-wrap">
    <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
     <!-- <el-form-item label="商品类目：">
       <el-select v-model="searchFilters.level" style="width:100%">
         <el-option label="一级类目" :value="1">一级类目</el-option>
         <el-option label="二级类目" :value="2">二级类目</el-option>
         <el-option label="三级类目" :value="3">三级类目</el-option>
       </el-select>
       </el-form-item> -->
       <el-form-item label="商品类目">
           <tree-select :options="categoryOptions"
                        placeholder="商品类目"
                        v-model="searchFilters.level"
                        :normalizer="normalizer"
                        @select="treeSelect"
                        style="width:230px"/>
         </el-form-item>




      <!-- 搜索区域按钮-查询,重置 -->
      <div class="tool-wrap">
       <div class="left-area">
        <el-button-group>
         <el-button type="primary" size="small" @click="findPage()">查询</el-button>
         <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
         <el-button type="primary" size="small" @click="addForm()">新增</el-button>
        </el-button-group>
       </div>
      </div>
      <!-- 表格数据部分 -->
      <div class="table-wrap">
       <jic-table
          :height="350"
          :operationWidth=300
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :showDetailOperation=false
          :showEditOperation=true
          :showBatchDelete=false
          :showSelection=false
          :showIndex=false
          :showDeleteOperation=false
          @findPage="findPage"
          @handleDetail="handleDetail"
          @handleDelete="handleDelete"
          @handleEdit="handleEdit"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          ref="jicTable"
        ></jic-table>
      </div>
    </el-form>
    </div>
   </div>
<el-dialog title="增加积分" width="30%" :visible.sync="reviewFormVisible" :close-on-click-modal="false">

 <div class="toolbar">
     <el-row>
      <el-tabs type="border-card">
       <el-tab-pane label="基本信息">
       <el-form :inline="true" :model="dataForm" :rules="dataFormRule" :size="size" label-width="110px"  style="text-align:center;" ref="dataForm"  :disabled="this.$route.query.disabled" class="form">
       <el-row style="margin-top: -20px;">
       <el-divider content-position="center">
        <span style="font-size:16px;font-weight:800">基本信息</span>
       </el-divider>
         <el-form-item label="商品类目" prop="category">
           <tree-select :options="categoryOptions"
                        placeholder="商品类目"
                        noResultsText="暂无数据"
                        v-model="dataForm.category"
                        :normalizer="normalizer"
                        @select="treeSelect"
                        style="width:230px"/>
         </el-form-item>
         <el-form-item label="加价幅度"  prop="increment">
           <el-input v-model="dataForm.increment" :disabled="false" placeholder="加价幅度" style="width:220px;">%</el-input>%
         </el-form-item>
       </el-row>
      </el-form>
      <div class="tool-wrap" style="margin-top: 20px">
       <div class="left-area">
        <el-button-group>
         <el-button type="primary" size="small" @click="submitForm()" v-show="!this.$route.query.disabled">保存</el-button>
         <el-button type="primary" size="small" @click="reviewFormVisible=false">取消</el-button>
        </el-button-group>
       </div>
      </div>
     </el-tab-pane>
    </el-tabs>
   </el-row>
  </div>
  </el-dialog>
</div>
</template>

<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";
  import TreeSelect from "@riophae/vue-treeselect";
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

//二.数据输出区
export default {
  //===== 注册组件 =====
  components: {
    jicTable,
    TreeSelect,

  },

  //===== 数据初始化区=====
  data() {
    return {
      reviewFormVisible: false,
      //===== 公共数据初始化 =====
      pageIndex: 0, //当前页数：首页；
      pageSize: 10, //每页记录数：10条记录；
      totalSize: 0, //总记录数：返回数据总条数
      pageRequest: { pageNum: 1, pageSize: 10 }, // 请求数据的参数
      tableList: [], // 表格列表数据
      searchSize: "mini",
      list: [],
      categoryOptions:[],
      // list1:[],
      // list2:[],
      size: 'small',
      //=====表格表头数据=====
      tableHeaderList: [
        { prop: "name", label: "一级类目", minWidth: 100, formatter: null },
        { prop: "name2", label: "二级类目", minWidth: 100, formatter: null },
        { prop: "name3", label: "三级类目", minWidth: 100, formatter: null },
        { prop: "increment", label: "加价幅度", minWidth: 100, formatter: null }
      ],
        dataForm: {
          // increment:null,
          // name:null,
          // id:null,
          // type:null,
        },

      dataFormRule: {
        category: [{required: true, message: "请输入商品类目", trigger: "change"}],
        increment: [{required: true, message: "请输入加价幅度", trigger: "blur"}],
      },

      //=====搜索表单对应的数据对象初始化=====
      searchFilters: {
        id: null,
        saleTaxRate: null,
        categoryCode: null,
        thirdCode: null,
        description: null,
        fullIdPath: null,
        fullNamePath: null,
        isVisible: null,
        isLeaves: null,
        level: null,
        listSort: null,
        name: null,
        parentId: null,
        pictureUrl: null,
        type: null,
        firstCategoryId: null,
        deptId: null,
        createTime: null,
        creator: null,
        updateTime: null,
        updater: null,
        deleteFlag: null,
        creatorName: null,
        updaterName: null
      }
      //dialogVisible: false, //// 是否显示弹窗内容;
      //editDialogVisible1: false,//// 是否可编辑弹窗内容;
      //editLoading: false,////是否显示加载时动画效果;
    };
  },

  //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
  mounted() {
    // this.searchFilters.level=1;
    this.findPage();
    this.getDetail();
    this.queryDeptTree();
  },

  //=====Vue.js 方法区=====
  methods: {
      getDetail() {
          let this_ = this;
            if (this.$route.query != null && this.$route.query.id != null && this.$route.query.id != '' && this.$route.query.id != 'null' && this.$route.query.id != "undefined") {
            let params = {};
            params.id = this.$route.query.id;
            this.utils.request.queryCategoryById(params, function (res) {
            if (res.code === "0000") {
            this_.dataForm = res.data;
            this_.totalSize = Number(res.data.total);
            } else {
            this_.$message({message: "操作失败, " + data.msg, type: "error"});
            }
            });
          }


          },
            queryDeptTree() {
              let this_ = this
              this.utils.request.queryBehindCategory({}, res => {
                if (res.code == '0000' && res.data != null) {
                  this_.categoryOptions = res.data
                } else {
                  this_.categoryOptions = []
                }
              })
            },

            //类目树选中
            treeSelect: function (param) {
              this.dataForm.id = param.id;
              // this.dataForm.type=param.type;
            },
            normalizer(node) {
              if (node.categoryList == null || node.categoryList.length == 0) {
                delete node.categoryList;
              }
              return {
                id: node.id,
                label: node.name,
                children: node.categoryList,
                // type:node.type
              }
            },

          submitForm: function() {
            let this_ = this;
            this_.$refs.dataForm.validate(valid => {
            if (valid) {
            this_.$confirm("确认提交吗？", "提示", {}).then(() => {
              this_.editLoading = true;
              let params = this.dataForm;
              this_.utils.request.updateIncrement(params, function (res) {
              if (res.code === "0000") {
                  this_.$message({message: "操作成功", type: "success"});
              } else {
                  this_.$message({message: "操作失败", type: "error"});
              }
              });
              this_.reviewFormVisible = false;
            });
            }
            });
          },

    //1.查询按钮：查询列表数据
    findPage(pageNum) {
      // 传过滤器的参数
      let this_ = this;
      if (this_.searchFilters === undefined || this_.searchFilters === null) {
        this_.searchFilters = {};
      }

      this_.searchFilters.pageNum =
        pageNum === null || pageNum === undefined
          ? this.pageRequest.pageNum
          : pageNum;
      this_.searchFilters.pageSize = this.pageRequest.pageSize;
      this.utils.request.selectPageCategory(this_.searchFilters, function(res) {
        if (res.code === "0000") {
          let names = [];
          let list1 = [];
          let lists = [];
          for (let i = 0; i < res.data.length; i++) {
            names.push(res.data[i].name);
          }
          /*
     let list=[]

     const map = new Map();

     for (let i = 0; i <res.data.length; i++) {
        names.push(res.data[i].name);
     }
     map.set("name",names)
     for (let [key, value] of map) {
       console.log(key, value)
     }
     for (let i = 0; i <res.data.length; i++) {
       list1.push(res.data[i].categoryList);
       for (let j = 0; j <list1.length ; j++) {
         alert(list1[i][j].name)
       list.push(list1[i][j].name)
       }
     }
     console.log(list)
    lists.push(names);
    lists.push(list);
    console.log(lists)*/

          console.log(names);
          this_.tableList = res.data.rows;
          /* console.log(this_.list)*/

          //alert(names)
          /* this_.$set(this_.tableList,"name",names)*/
          // this_.tableList.name= names;
          // this_.tableList=names;
          // alert(this_.tableList.name)
          this_.totalSize = Number(res.data.total);
        } else {
          this_.tableList = [];
          this_.totalSize = 0;
        }
      });
    },

    // 2.重置按钮：无条件查询搜索框条件
    resetForm(formName) {
      this.searchFilters = {};
      this.findPage(null);
    },

    // 3.详情按钮对应的方法
    handleDetail(params) {
      this.$router.push({
        path: "/MCategoryDetail/",
        query: { id: params.row.id, disabled: true }
      });
    },

    // 4.编辑按钮对应的方法
    handleEdit(params) {
      this.$router.push({
        path: "/MCategoryDetail/",
        query: { id: params.row.id, disabled: false }
      });
    },

    // 5.跳转到新增记录页面；
    addForm(params) {
      this.dataForm = {};
      this.reviewFormVisible = true;
    },
    // 6.每页记录数发生变化
    handleSizeChange(params) {
      this.pageRequest.pageSize = params.size;
    },

    // 7.请求页数发生变化
    handlePageChange(params) {
      this.pageRequest.pageNum = params.number;
      this.findPage();
    },
    // 8.页面弹窗处理方法
    add() {
    },

    // 9.关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },

    // 10.删除按钮：删除选中的记录
    handleDelete(data) {
      this.utils.request.deleteMCategory({ id: data.row.id }, res => {
        if (res.data) {
          this.$message({ message: "删除成功", type: "success" });
          this.findPage();
        } else {
          this.$message({ message: "删除失败", type: "warning" });
        }
      });
    }
    //==========Vue.js自定义方法区==========
  }
};
</script>
<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-form-item__content {
      height: 32px;
      line-height: 32px;
      width: 150px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 150px;
    }
  }

  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }

  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }

  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
</style>
